<template>
    <div id="">
        <button @click="flag = !flag">切换</button>
        <!-- 过渡动画 -->
        <transition name="tstBox">
            <div class="box" v-if="flag">
            </div>
        </transition>
    </div>
</template>

 <script setup lang="ts">
import { ref } from 'vue'

let flag = ref<boolean>(false)

</script>

<style lang="less" scoped>
.box {
    width: 200px;
    height: 200px;
    background-color: red;
}

// enter是从隐藏到显示的动画
.tstBox-enter-from {
    width: 0;
    height: 0;
}
// active阶段可以添加一些动画效果
.tstBox-enter-active {
    transition: all 1s ease;
}

.tstBox-enter-to {
    width: 200px;
    height: 200px;
}

// leave是显示到隐藏的动画
.tstBox-leave-from {
    width: 200px;
    height: 200px;
}

.tstBox-leave-active {
    transition: all 1s ease;
}

.tstBox-leave-to {
    width: 0;
    height: 0;
}
</style>